<template>
  <div class="curr-page">
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="预约申请" name="first">
        <div v-if="connect.from_users.length == 0">
          <el-empty description="暂无预约申请"></el-empty>
        </div>
        <div v-else>
          <el-descriptions
            :title="s_item.car[0].name"
            v-for="(s_item, s_index) in connect.from_users"
            :key="'s' + s_index"
            :column="3"
            class="mb-3"
            ><template #extra>
              <router-link
                :to="'/detail/car/' + s_item.carId"
                v-slot="{ navigate }"
                custom
              >
                <el-button @click="navigate" class="text-black mr-3" size="mini"
                  >查看车辆</el-button
                >
              </router-link>

              <!-- 已预约，取消预约 -->
              <el-button
                @click="cancalConnect(s_item._id)"
                size="mini"
                v-show="s_item.state == 0"
              >
                正在预约
              </el-button>
              <span v-show="s_item.state == 1" class="text-red"
                >车主已拒绝</span
              >
              <span v-show="s_item.state == 2" class="text-nav"
                >车主已同意</span
              >
            </template>

            <!-- <el-descriptions-item label="车主信息" :span="3">
              {{ s_item.to_user[0].username }}
            </el-descriptions-item> -->

            <el-descriptions-item label="预约时间">
              <span class="text-red fs-xl">{{ s_item.time }}</span>
            </el-descriptions-item>

            <el-descriptions-item label="预约日期">
              {{ dateFormatter(s_item.date) }}
              <!-- <el-date-picker
                v-model="s_item.date"
                type="date"
                format="YYYY 年 MM 月 DD 日"
                disabled
              >
              </el-date-picker> -->
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-tab-pane>

      <el-tab-pane label="预约审核" name="second">
        <div v-if="connect.to_users.length == 0">
          <el-empty description="暂无预约管理"></el-empty>
        </div>
        <div v-else>
          <el-descriptions
            :title="m_item.car[0].name"
            v-for="(m_item, m_index) in connect.to_users"
            :key="'s' + m_index"
            :column="3"
            class="mb-3"
            ><template #extra>
              <router-link
                :to="'/detail/car/' + m_item.carId"
                v-slot="{ navigate }"
                custom
              >
                <el-button @click="navigate" class="text-black mr-3" size="mini"
                  >查看车辆</el-button
                >
              </router-link>

              <!-- 已预约，取消预约 -->
              <el-button
                type="primary"
                @click="agreeConnect(m_item._id)"
                size="mini"
                round
                v-show="m_item.state == 0"
              >
                等待审核
              </el-button>
              <span v-show="m_item.state == 1" class="text-red">已拒绝</span>
              <span v-show="m_item.state == 2" class="text-nav">已同意</span>
            </template>

            <el-descriptions-item label="预约时间">
              <span class="text-red fs-xl">{{ m_item.time }}</span>
            </el-descriptions-item>

            <el-descriptions-item label="预约日期">
              {{ dateFormatter(m_item.date) }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label="预约成功" name="third">角色管理</el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      connect: {
        from_users: [],
        to_users: [],
      },
    };
  },

  methods: {
    fetchInitData() {
      this.fetchConnect();
    },

    // 取消预约
    async cancalConnect(id) {
      // 警告
      this.$confirm("取消预约,是否确认？", "确认信息", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        // 确认
        .then(async () => {
          // 发起取消请求
          this.$axios.delete(`/connect/${id}`).then(() => {
            this.$router.go(0);
          });

          this.$message({
            type: "info",
            message: "取消成功",
          });
        })
        // 取消
        .catch((action) => {
          this.$message({
            type: "info",
            message: action === "cancel" ? "放弃取消" : "关闭页面",
          });
        });
    },

    // 获取预约情况
    async fetchConnect() {
      await this.$axios
        .get(`/connect/user/${sessionStorage.userId}`)
        .then((res) => {
          this.connect = res.data;
        });
    },

    // 审核
    async agreeConnect(id) {
      this.$confirm("是否同意预约请求？", "确认信息", {
        distinguishCancelAndClose: true,
        confirmButtonText: "同意",
        cancelButtonText: "拒绝",
      })
        // 确认
        .then(async () => {
          await this.$axios
            .put(`/connect/${id}`, {
              isVaild: true,
              state: 2,
            })
            .then((data) => {
              console.log(data);
              this.$message({
                type: "success",
                message: "审核同意成功",
              });
              this.fetchConnect();
            });
        })
        // 取消
        .catch(async (action) => {
          if (action === "cancel") {
            await this.$axios
              .put(`/connect/${id}`, {
                isVaild: false,
                state: 1,
              })
              .then((data) => {
                console.log(data);
                this.$message({
                  type: "success",
                  message: "审核拒绝成功",
                });
                this.fetchConnect();
              });
          }
        });
    },

    dateFormatter(cellValue) {
      let date = new Date(cellValue);
      const year = date.getFullYear().toString();
      var month = date.getMonth();
      month = (month + 1).toString().padStart(2, "0");
      const day = date
        .getDate()
        .toString()
        .padStart(2, "0");
      // let hours = date.getHours();
      // let minutes = date.getMinutes();
      return year + "-" + month + "-" + day;
    },
  },

  created() {
    this.fetchInitData();
  },
};
</script>

<style lang="scss" scoped>
.curr-page {
  margin: 0px;
  padding: 0px;
}
</style>
